<!DOCTYPE html>
<html>
<head>
  <title>搜索结果</title>
  <style>
    .search-result { margin: 20px 0; padding: 15px; border: 1px solid #eee; border-radius: 5px; }
    .result-title { font-size: 1.2em; color: #333; margin-bottom: 10px; }
    .result-content { color: #666; line-height: 1.6; }
    .no-results { color: #999; text-align: center; padding: 50px; }
  </style>
</head>
<body>
  <div class="container">
    <h1>搜索结果</h1>
    <div id="results"></div>
  </div>

  <script>
    async function loadResults() {
      const params = new URLSearchParams(window.location.search);
      const query = decodeURIComponent(params.get('q') || '');
      
      const resultsContainer = document.getElementById('results');
      if (!query) {
        resultsContainer.innerHTML = '<div class="no-results">请输入搜索关键词</div>';
        return;
      }

      try {
        const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
        const results = await response.json();
        
        if (results.length === 0) {
          resultsContainer.innerHTML = `
            <div class="no-results">
              没有找到 "${query}" 的相关结果
            </div>
          `;
          return;
        }

        resultsContainer.innerHTML = results.map(result => `
          <div class="search-result">
            <div class="result-title">${result.title}</div>
            <div class="result-content">${result.content}</div>
          </div>
        `).join('');
      } catch (error) {
        resultsContainer.innerHTML = `
          <div class="no-results">
            搜索过程中发生错误，请稍后再试
          </div>
        `;
      }
    }

    loadResults();
  </script>
</body>
</html>